<template>
  <div class="memberDetail" v-if="detail">
    <p>ID： {{ detail.id }}</p>
    <p>用户昵称： {{ detail.nicheng }}</p>
    <p>账号： {{ detail.lianxifangshi }}</p>
    <p>申请时间： {{ detail.shenqingriqi }}</p>
    <p>姓名： {{ detail.xingming }}</p>
    <p>联系方式： {{ detail.lianxifangshi }}</p>
    <p v-if="detail.banli && detail.banli.code">
      是否办理： {{ detail.banli.code == 1 ? "已办理" : "未办理" }}
    </p>
    <p>
      会员时长： {{ detail.huiyuanshichang }}个月
      <span class="setMember" v-if="!set" @click="setMember">设置会员</span>
    </p>
    <el-form-item v-if="set" style="margin-left: 32px" label="会员时长:">
      <el-col>
        <el-input-number
          size="large"
          v-model="limit"
          :precision="0"
          :controls="false"
        />
        月
        <span @click="set = false" class="setMember">取消</span>
        <span @click="confirmSet" class="setMember">确定</span>
      </el-col>
    </el-form-item>
    <el-form-item v-if="set" style="margin-left: 32px" label="有效期:">
      <el-date-picker
        v-model="startDate"
        type="date"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        size="large"
        class="ml20"
        prefix-icon="Calendar"
        value-format="YYYY-MM-DD"
        @change="chooseDate"
      />
      <span style="margin-left: 4px">起</span>
    </el-form-item>
    <p>有效期： {{ detail.goumairiqi + "--" + detail.jiezhiriqi }}</p>
    <div
      v-if="detail.hetongwenjian && detail.hetongwenjian.length"
      class="download-box"
    >
      <div
        class="item"
        v-for="(item, index) in detail.hetongwenjian"
        :key="index"
      >
        <div class="pdf" v-if="item.fileSuffix == 'pdf'">PDF</div>
        <div class="zip" v-if="item.fileSuffix == 'zip'">ZIP</div>
        <div class="info">
          <div class="name">{{ item.fileName }}</div>
          <div class="downloadCount">下载量： {{ item.xiazailiang }}</div>
        </div>
        <a class="download" @click="downloadFile(item.filePath, item.fileName)">
          <img :src="download" alt="#" />
          <span>下载</span>
        </a>
      </div>
    </div>
    <span class="addContract" @click="show = true">增加会员合同+</span>
    <el-dialog
      class="list-dialog"
      show-close="false"
      width="40%"
      v-model="show"
      center
      style="padding: 0 30px"
    >
      <el-form :model="form">
        <el-form-item label="会员合同：">
          <bjz-oss
            :previewList="form.hetongwenjian"
            :accept="['.pdf']"
            :allowMultiple="true"
            @success="success"
            @remove="remove"
          />
        </el-form-item>
      </el-form>
      <el-form-item class="note-button-group">
        <el-button size="large" @click="show = false">取消</el-button>
        <el-button class="ml50" size="large" type="primary" @click="submitForm">
          提交
        </el-button>
      </el-form-item>
    </el-dialog>
    <div class="note-button-group">
      <el-button size="large" type="primary" @click="router.go(-1)">
        返回
      </el-button>
      <el-button class="ml50" size="large" type="primary" @click="submitForm">
        提交
      </el-button>
    </div>
  </div>
</template>
<script setup>
import { defineComponent, toRefs, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { GetMemberOrderDetail, EditMemberOrder } from "@/api/membership";
import download from "@/assets/icon-download.png";
import { baseMsg } from "@/utils/utils";
const route = useRoute();
const router = useRouter();
const show = ref(false);
const set = ref(false);
const detail = ref({});
const form = ref({});
const startDate = ref("");
const endDate = ref("");
const limit = ref(0);

// 设置会员
const setMember = () => {
  set.value = true;
};
// 文件上传
const success = (res) => {
  form.value.hetongwenjian.push(res);
};
// 文件删除
const remove = (index) => {
  form.value.hetongwenjian.splice(index, 1);
};
// 时长确定
const confirmSet = () => {
  if (startDate.value) {
    getEndDate();
    form.value.huiyuanshichang = limit;
    form.value.goumairiqi = startDate.value;
    form.value.jiezhiriqi = endDate.value;
    submitForm();
  } else {
    baseMsg("请选择有效期", false);
  }
};
const submitForm = () => {
  EditMemberOrder(form.value).then((res) => {
    if (res.code == 4202) {
      baseMsg("编辑成功");
      GetDetail();
      show.value = false;
      set.value = false;
      router.go(-1);
    }
  });
};
// 获取结束日期
const getEndDate = () => {
  if (startDate.value) {
    // 获取当前时间
    let currentDate = new Date(startDate.value);

    // 获取当前时间后10个月的日期
    let tenMonthsLater = new Date(
      currentDate.setMonth(currentDate.getMonth() + limit.value)
    );

    // 获取对应的年、月、日
    let year = tenMonthsLater.getFullYear();
    let month = tenMonthsLater.getMonth() + 1; // getMonth返回的是0-11，所以要加1
    let day = tenMonthsLater.getDate();

    // 将日期格式化为字符串，例如：2023-01-24
    endDate.value = `${year}-${month.toString().padStart(2, "0")}-${day
      .toString()
      .padStart(2, "0")}`;
  }
};
const chooseDate = () => {
  getEndDate();
};
const downloadFile = (url, fileName) => {
  const x = new window.XMLHttpRequest();
  x.open("GET", url, true);
  x.responseType = "blob";
  x.onload = () => {
    const url = window.URL.createObjectURL(x.response);
    const a = document.createElement("a");
    a.href = url;
    a.download = fileName;
    a.click();
  };
  x.send();
};
const GetDetail = () => {
  GetMemberOrderDetail({ id: route.query.id }).then((res) => {
    if (res.code == 4201) {
      detail.value = res.data;
      let data = JSON.stringify(res.data);
      form.value = JSON.parse(data);
      if (detail.value.banli && detail.value.banli.code) {
        if (detail.value.banli.code == 1) {
          set.value = false;
        } else {
          set.value = true;
        }
      }
    }
  });
};
GetDetail();
</script>
<style lang="scss" scoped>
.memberDetail {
  padding: 1px 0;
  p {
    margin: 32px;
    color: #333;
    font-size: 16px;
  }
  .download-box {
    margin: 20px 32px;
    .item {
      margin-top: 10px;
      padding: 15px 20px;
      border: 1px solid #ccc;
      border-radius: 6px;
      display: flex;
      .pdf,
      .zip {
        width: 60px;
        height: 80px;
        text-align: center;
        line-height: 80px;
        font-size: 20px;
        font-weight: bold;
        background-color: #dfdfdf;
      }
      .info {
        margin-left: 10px;
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;
        .downloadCount {
          color: #999;
          font-size: 14px;
        }
      }
      .download {
        display: flex;
        flex-direction: column;
        text-align: center;
        margin: auto 0;
        img {
          width: 40px;
          height: 40px;
        }
      }
    }
  }
  .addContract,
  .setMember {
    color: #159bd5;
    margin: 32px;
    font-size: 16px;
    cursor: pointer;
  }
}
.note-button-group {
  width: auto !important;
  margin: 32px;
  width: 100%;
  text-align: center;
}
</style>
